<template>
    <div>
        <el-row>
            <el-col :offset="6" :span="11">
                <el-menu default-active="1"  background-color="" class="el-menu-demo" mode="horizontal" >
                    <el-menu-item><h1 class="name">之乎</h1></el-menu-item>     
                    <el-menu-item index="1" @click="menu('follow')">首页</el-menu-item>
                    <el-menu-item index="2" @click="menu('topic')">话题</el-menu-item>
                    <el-menu-item index="3" @click="menu('hot')">热门讨论</el-menu-item>
                    <el-menu-item index="4" @click="menu('mymessage')">消息</el-menu-item>
                    <el-menu-item index="5" @click="menu('enquire')" >提问</el-menu-item>
                    <el-input v-model="query" class="search" size="small" style="width:200px" ></el-input>
                    <el-button class="search" type="primary"  
                    @click="search" icon="el-icon-search" 
                    size="small"
                    >搜索</el-button>
                    <div  class="avatar" @click="menu('user')">
                       <el-avatar  :size="40">
                        <img  :src="userAvatar"/>
                        </el-avatar>
                    </div> 
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
 import Cookie from 'js-cookie'
export default {
    name: 'Header',

    data() {
        return {
            activeIndex:"",
            query:'',
            userAvatar:'',
        };
    },

    mounted() {
        this.userAvatar = Cookie.get('avatar');
        this.menu('follow')
    },

    methods: {
         menu(menu){
             console.log("menu",menu);
            this.$router.push({
                name:menu
            })
        },
        search(){
            
            if(this.query == ''){
                this.$message.error({
                    message:'输入搜索内容'
                });
                return;
            }
            this.$router.push({
                name:'search',
                query:{
                   query:this.query
                }
            })
        },
    },
};
</script>

<style scoped>
.search{
    margin-top: 12px;
    margin-left: 13px ;
}
.name{
    display: inline;
    margin-left:25px ;
}
.avatar{
    display: inline-block;
    position: relative;
    left: 15px;
    top: 12px;
    cursor: pointer;
}
</style>